<template>
    <div class="subDiv">这是子模块的地盘了<br>
        <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
        <h2>当前求和为：{{ sum }}</h2>
        <button @click="changSum">点我+1</button>
    </div>
    
</template>

<script setup lang="ts" name="Person">
    import { watch,ref } from 'vue';
    let sum=ref(0);

    function changSum(){
        sum.value++;
    }

    // 情况一：监视【ref】定义的【基本类型】数据
    const stopWatch=watch(sum,(newValue,oldValue)=>{
        console.log("sum的值变化了",newValue,oldValue);
        if(newValue>5){
            console.log("sum的值大于5了，停止监视");
            stopWatch();
        }
    })
    
</script>

<style scoped>
    .subDiv{
        color:blue;
        background-color:rgb(210, 205, 205);
        width: 800px;
        height: 300px;
        font-size: 15px;
        }
    button{
        width: 100px;
        height: 30px;
        font-size: 15px;
        }
</style>